﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>xiyueta().addClass() 属性方法  xiyueta.js库</title>
    <meta name="keywords" content="xiyuetaJS库案例,xiyueta测试案例,xiyueta.js测试案例,xiyueta.js测试CASE,xiyueta在线调试,xiyueta在线测试">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://cdn.staticfile.org/codemirror/5.40.2/codemirror.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/codemirror/5.40.2/codemirror.min.css">
    <script src="https://cdn.staticfile.org/codemirror/5.40.2/mode/htmlmixed/htmlmixed.min.js"></script>
    <script src="https://cdn.staticfile.org/codemirror/5.40.2/mode/css/css.min.js"></script>
    <script src="https://cdn.staticfile.org/codemirror/5.40.2/mode/javascript/javascript.min.js"></script>
    <script src="https://cdn.staticfile.org/codemirror/5.40.2/mode/xml/xml.min.js"></script>
    <script src="https://cdn.staticfile.org/codemirror/5.40.2/addon/edit/closetag.min.js"></script>
    <script src="https://cdn.staticfile.org/codemirror/5.40.2/addon/edit/closebrackets.min.js"></script> 
    
    <!--[if lt IE 9]>
    <script src="//cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <![endif]-->

    <script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?9e75428c7b3992dd93bd71098a1f9dc3";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
    </script>

</head>
<body>
<style>
body{min-height:300px;padding-top:90px;background: #f6f6f6;}.container{width:98%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}.CodeMirror{min-height:300px;;font-family: Menlo,Monaco,Consolas,"Andale Mono","lucida console","Courier New",monospace;}#textareaCode{min-height:300px}#iframeResult{display: block;overflow: hidden;border:0!important;min-width:100px;width:100%;min-height:300px;background-color:#fff}@media screen and (max-width:768px){#textareaCode{height:300px}.CodeMirror{height:300px;font-family: Menlo,Monaco,Consolas,"Andale Mono","lucida console","Courier New",monospace;}#iframeResult{height:300px}.form-inline{padding:6px 0 2px 0}}.logo h1{background-image:url(https://www.xiyueta.com/images/logo-domain-white.png);background-repeat:no-repeat;text-indent:-9999px;width:160px;height:39px;margin-top:10px;display:block}
</style>
<nav class="navbar navbar-default navbar-fixed-top" style="background: #96b97d;">
      <div class="container">
        <div class="navbar-header logo"><h1 onClick="window.open('https://www.xiyueta.com')">XIYUETA.COM</h1>
        </div>
      </div>
    </nav>
    <div class="container" >
    <div class="row">
    
    <div class="col-sm-6">
    <div class="panel panel-default"> 
        <div class="panel-heading">
            <form class="form-inline">
        <div class="row">
            <div class="col-xs-6">
                 <button type="button" class="btn btn-default">源代码：</button>
                  <!-- <a href="/try/try.php?filename=tryjs_events" class="btn btn-warning" role="button">左右布局</a> -->
                
              </div>
              <div class="col-xs-6 text-right">
                <button type="button" class="btn btn-success" onclick="submitTryit()" id="submitBTN"><span class="glyphicon glyphicon-send"></span> 点击运行</button>
            </div>
        </div>
                
            </form>
        </div>
        <div class="panel-body">
            <textarea class="form-control"  id="textareaCode" name="textareaCode">&lt;script src="../dist/xiyueta.min.js?v31">&lt;/script>
&lt;script>

/*
.parse()    解析HTML
.addClass() 将指定的类添加到匹配元素集中的每个元素
$.log()     在浏览器里显示内容 == document.write()
.print()    打印匹配元素集中第一个元素的HTML内容 format为格式化HTML
*/

var html='&lt;div>\n\
&lt;ul>\n\
&lt;li>xiyueta库&lt;/li>\n\
&lt;li class="url">xiyueta.com&lt;/li>\n\
&lt;li>&lt;/li>\n\
&lt;/ul>\n\
&lt;/div>';

$().parse(html);
$("li").addClass("nav");
$("li:eq(-1)").addClass(" foot link ");
$.log($().print());

&lt;/script></textarea>
        </div>
    </div>
    </div>

    <div class="col-sm-6">
    <div class="panel panel-default"> 
        <div class="panel-heading"><form class="form-inline"> <button type="button" onclick="submitTryit()" class="btn btn-default">运行结果</button>


        </form></div>



        <div class="panel-body"><div id="iframewrapper"></div></div>
    </div>
    </div>
  
    </div>
    
    <footer>
        <div class="row">
            <div class="col-sm-12">
      <div style="text-align: center;">

                <p>
    Copyright © 2023 <a href="https://www.xiyueta.com/">xiyueta.com</a> MIT Licensed</p>
         </div>
            </div>
        </div>
    </footer>
</div>
<script>
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
               mode: null},
              {matches: /(text|application)\/(x-)?vb(a|script)/i,
               mode: "vbscript"}]
};
var editor = CodeMirror.fromTextArea(document.getElementById("textareaCode"), {
    mode: mixedMode,
    selectionPointer: true,
    lineNumbers: false,
    matchBrackets: true,
    indentUnit: 4,
    indentWithTabs: true
});

window.addEventListener("resize", autodivheight);

var x = 0;
function autodivheight(){
    var winHeight=0;
    if (window.innerHeight) {
        winHeight = window.innerHeight;
    } else if ((document.body) && (document.body.clientHeight)) {
        winHeight = document.body.clientHeight;
    }
    //通过深入Document内部对body进行检测，获取浏览器窗口高度
    if (document.documentElement && document.documentElement.clientHeight) {
        winHeight = document.documentElement.clientHeight;
    }
    height = winHeight*0.63
  
    editor.setSize('100%', height);
    document.getElementById("iframeResult").style.height= height + "px";
} 

function submitTryit() {
  var text = editor.getValue();
  // var patternHtml = /<html[^>]*>((.|[\n\r])*)<\/html>/im
  // var patternHead = /<head[^>]*>((.|[\n\r])*)<\/head>/im
  // var array_matches_head = patternHead.exec(text);
  // var patternBody = /<body[^>]*>((.|[\n\r])*)<\/body>/im;
  
  // var array_matches_body = patternBody.exec(text);
  // var basepath_flag = 1;
  // var basepath = '';
  // if(basepath_flag) {
  //   basepath = '<base href="http://m.xiyueta.com/" target="_blank">';
  // }
  // if(array_matches_head) {
  //   text = text.replace('<head>', '<head>' + basepath );
  // } else if (patternHtml) {
  //   text = text.replace('<html>', '<head>' + basepath + '</head>');
  // } else if (array_matches_body) {
  //   text = text.replace('<body>', '<body>' + basepath );
  // } else {
  //   text = basepath + text;
  // }
  var ifr = document.createElement("iframe");
  ifr.setAttribute("frameborder", "0");
  ifr.setAttribute("id", "iframeResult");  
  document.getElementById("iframewrapper").innerHTML = "";
  document.getElementById("iframewrapper").appendChild(ifr);
 
  var ifrw = (ifr.contentWindow) ? ifr.contentWindow : (ifr.contentDocument.document) ? ifr.contentDocument.document : ifr.contentDocument;
  ifrw.document.open();
  ifrw.document.write(text);  
  ifrw.document.close();
  autodivheight();
}
submitTryit();
autodivheight();
</script></body>
</html>